<template>
  <el-dialog
    title="设置"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    width="720px"
    append-to-body
    class="borderb_dia"
  >
    <div class="mytips_warning mytips_warning2 c_text2 mb-12 br_4">
      <i class="el-icon-warning iconinfo"></i>
      休眠时段内消息不发送，休眠结束后不补发，满足下列设置的任一时段即休眠。
    </div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      label-position="left"
    >
      <el-form-item label="" prop="checked" class="delay">
        <div class="flex">
          <el-checkbox v-model="form.checked1" class="mycheckbox">
            <span class="c_text">按时段休眠：</span>
          </el-checkbox>
          <div>
            <div class="flex">
              <el-time-select
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 134px"
              ></el-time-select>
              <div class="divitime">~</div>
              <el-time-select
                type="date"
                placeholder="选择日期"
                v-model="form.date2"
                style="width: 134px"
              ></el-time-select>
            </div>
            <div class="modeltip mb-20">每日23:00 至次日 09:00休眠</div>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="" prop="checked" class="delay">
        <div class="flex">
          <el-checkbox v-model="form.checked2" class="mycheckbox">
            <span class="c_text">按周休眠：</span>
          </el-checkbox>
          <div>
            <div class="flex">
              <el-checkbox-group v-model="form.checkList">
                <el-checkbox v-for="(item,index) in weekeds" :key="index" :label="item.name">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
            <div v-if="form.checkList.length" class="modeltip mt-0 mb-20">每
              <span v-for="(item,index) in weekeds" :key="index">
                <template v-if="form.checkList.includes(item.name)">
                  <span>{{item.name}}</span>、
                </template>
              </span>
              休眠
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="" prop="checked" class="delay">
        <div class="flex">
          <el-checkbox v-model="form.checked3" class="mycheckbox">
            <span class="c_text">按日期休眠：</span>
          </el-checkbox>
          <div>
            <div class="flex">
              <el-date-picker
                v-model="form.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
            <div class="modeltip">按既定的日期区间内休眠</div>
          </div>
        </div>
      </el-form-item>
     
    </el-form>
    <div slot="footer">
      <el-button size="small" @click="handleCloseDialog">取消</el-button>
      <el-button size="small" type="primary" @click="submitForm"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
// import { validPhone, validPassword } from "@/utils/validate";
// import { editInfo } from "@/api/advmaster";
export default {
  data() {
    return {
      form: {
        checked1: false,
        date1: '',
        date2: '',
        checkList:[],
        checked2: false,
        checked3: false,
      },
      weekeds:[
        {id:1,name:'周一'},
        {id:2,name:'周二'},
        {id:3,name:'周三'},
        {id:4,name:'周四'},
        {id:5,name:'周五'},
        {id:6,name:'周六'},
        {id:7,name:'周日'},
      ],
      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        email: [
          {
            required: true,
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ],
        password: [],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
    };
  },
  props: {
    rowitem: {
      default: null,
    },
  },
  created() {},
  methods: {
    handleCloseDialog() {
      this.$emit("update:visableIf", false);
    },

    onBlur(type) {
      // 使用正则表达式匹配正整数
      const regex = /^[1-9]\d*$/;
      // 如果输入的值不是正整数，则将其设置为上一个有效值
      if (!regex.test(this.form[type])) {
        if (type == "min") {
          this.form.min = 5;
        } else {
          this.form.max = 10;
        }
      } else {
        if (this.form[type] > 999) {
          this.form[type] = 999;
        }
      }
    },

    handleDefault() {
      this.form.min = 5;
      this.form.max = 10;
    },

    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            // editInfo(this.form).then(() => {
            //   this.$modal.msgSuccess('修改成功')
            //   this.handleCloseDialog();
            //   this.$emit('getList');
            // })
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.delay {
  background: #f9f9f9;
  padding: 16px;
  margin-bottom: 8px;
}
.divi {
  display: inline-block;
  margin: 0 6px;
}
.mytips_warning {
  padding: 8px 15px;
}
.divitime {
  margin: 0 16px;
  font-size: 14px;
}
.modeltip{
  margin-top: 8px;
  font-size: 12px;
  line-height: 20px;
  color: rgba(0, 0, 0, .45);
}
.mycheckbox{
  width: 120px;
}
.el-checkbox-group{
  .el-checkbox{
    margin-right: 15px;
  }
}
</style>
